<template>
<view style="height:100vh">
		<layout>
			<!-- 项目列表模块 -->
			<view class="page-container">
			<!-- 搜索模块 -->
				<view class="search-form">
				  <!-- 项目名称输入 -->
				  <view class="form-item">
				    <input 
				      v-model="searchForm.projectName"
				      placeholder="请输入项目名称"
				      class="form-input"
				      placeholder-class="placeholder-style"
				    />
				  </view>
				
				  <!-- 日期范围选择 -->
				  <view class="form-item date-range">
				    <view 
				      class="date-item" 
				      @click="showDatePicker('start')"
				    >
				      <text>{{ searchForm.startDate || '开始日期' }}</text>
				    </view>
				    <text class="date-separator">-</text>
				    <view 
				      class="date-item" 
				      @click="showDatePicker('end')"
				    >
				      <text>{{ searchForm.endDate || '结束日期' }}</text>
				    </view>
				  </view>
				
				  <!-- 项目状态选择 -->
				  <view class="form-item">
				    <select 
				      v-model="searchForm.projectStatus"
				      class="form-select"
				      placeholder="请选择项目状态"
				    >
				      <option value="">全部状态</option>
				      <option value="1">进行中</option>
				      <option value="2">已完结</option>
				      <option value="3">未开始</option>
				    </select>
				  </view>
				
				  <!-- 操作按钮 -->
				  <view class="form-buttons">
				    <button 
				      class="reset-btn" 
				      @click="handleReset"
				    >
				      重置
				    </button>
				    <button 
				      class="search-btn" 
				      @click="handleSearch"
				    >
				      搜索
				    </button>
				  </view>
				</view>
			  <scroll-view class="card-list" scroll-y>
			    <!-- 列表头部 -->
			    <view class="list-header">
			      <text class="total-count">共 {{ projects.length }} 个项目</text>
			      <button 
			        class="smart-add-btn" 
			        @click="showAddForm"
			      >
			        <image 
			          src="/static/icon-add.png" 
			          class="add-icon" 
			        />
			        新建项目
			      </button>
			    </view>
			
			    <!-- 项目卡片循环 -->
			    <view 
			      v-for="project in projects" 
			      :key="project.id" 
			      class="card"
			    >
			      <view class="card-header">
			        <view class="header-left">
			          <text class="project-name">{{ project.name }}</text>
			          <text class="project-id">ID: {{ project.id }}</text>
			        </view>
			        <view 
			          class="status-tag" 
			          :style="{backgroundColor: getStatusColor(project.status)}"
			        >
			          {{ project.status }}
			        </view>
			      </view>
			
			      <view class="card-body">
			        <view class="info-row">
			          <view class="info-item">
			            <image 
			              src="/static/icon-user.png" 
			              class="info-icon" 
			            />
			            <text>{{ project.manager }}</text>
			          </view>
			          <view class="info-item">
			            <image 
			              src="/static/icon-date.png" 
			              class="info-icon" 
			            />
			            <text>
			              {{ formatDate(project.startDate) }} - 
			              {{ formatDate(project.endDate) }}
			            </text>
			          </view>
			        </view>
			      </view>
			
			      <view class="card-footer">
			        <button 
			          class="action-btn edit" 
			          @click="editProject(project)"
			        >
			          编辑
			        </button>
			        <button 
			          class="action-btn delete" 
			          @click="deleteProject(project.id)"
			        >
			          删除
			        </button>
			      </view>
			    </view>
			  </scroll-view>
			
			  <!-- 新增/编辑弹窗 -->
			  <view v-if="showForm" class="form-modal">
			    <view class="form-content">
			      <text class="form-title">{{ isEdit ? '编辑项目' : '新建项目' }}</text>
			      
			      <scroll-view class="form-scroll" scroll-y>
			        <!-- 项目名称输入 -->
			        <view class="form-item">
			          <text class="form-label required">项目名称</text>
			          <input 
			            v-model="projectForm.name" 
			            placeholder="请输入项目名称"
			            class="form-input"
			            placeholder-style="color:#999"
			          />
			        </view>
			
			        <!-- 负责人输入 -->
			        <view class="form-item">
			          <text class="form-label required">负责人</text>
			          <input
			            v-model="projectForm.manager"
			            placeholder="请输入负责人"
			            class="form-input"
			            placeholder-style="color:#999"
			          />
			        </view>
			
			        <!-- 日期选择器 -->
			        <view class="form-item date-picker">
			          <view class="date-item">
			            <text class="form-label required">开始日期</text>
			            <picker 
			              mode="date" 
			              :value="projectForm.startDate"
			              @change="(e) => projectForm.startDate = e.detail.value"
			            >
			              <view class="date-input">
			                {{ projectForm.startDate || "选择开始日期" }}
			                <image 
			                  src="/static/icon-calendar.png" 
			                  class="date-icon" 
			                />
			              </view>
			            </picker>
			          </view>
			
			          <view class="date-item">
			            <text class="form-label required">结束日期</text>
			            <picker
			              mode="date"
			              :value="projectForm.endDate"
			              @change="(e) => projectForm.endDate = e.detail.value"
			            >
			              <view class="date-input">
			                {{ projectForm.endDate || "选择结束日期" }}
			                <image 
			                  src="/static/icon-calendar.png" 
			                  class="date-icon" 
			                />
			              </view>
			            </picker>
			          </view>
			        </view>
			
			        <!-- 状态选择器 -->
			        <view class="form-item">
			          <text class="form-label">项目状态</text>
			          <picker 
			            mode="selector" 
			            :range="statusOptions" 
			            :value="statusIndex"
			            @change="statusChange"
			          >
			            <view class="form-input">
			              {{ projectForm.status || "选择项目状态" }}
			              <image 
			                src="/static/icon-arrow.png" 
			                class="arrow-icon" 
			              />
			            </view>
			          </picker>
			        </view>
			      </scroll-view>
			
			      <!-- 表单操作按钮 -->
			      <view class="form-buttons">
			        <button 
			          class="btn cancel" 
			          @click="cancelForm"
			        >
			          取消
			        </button>
			        <button 
			          class="btn confirm" 
			          @click="submitForm"
			        >
			          确认提交
			        </button>
			      </view>
			    </view>
			  </view>
			</view>
		</layout>
	</view>
 
</template>

<script setup>
import { ref, reactive } from 'vue'

// 测试数据
const projects = reactive([
  {
    id: 1001,
    name: '光伏电站建设项目',
    manager: '王环保',
    startDate: '2024-03-01',
    endDate: '2024-08-31',
    status: '进行中'
  }
])

// 搜索表单数据
const searchForm = ref({
  projectName: '',
  startDate: '',
  endDate: '',
  projectStatus: ''
})

// 项目表单数据
const projectForm = reactive({
  id: null,
  name: '',
  manager: '',
  startDate: '',
  endDate: '',
  status: ''
})

// 公共状态
const showForm = ref(false)
const isEdit = ref(false)
const statusIndex = ref(0)
const statusOptions = ['未开始', '进行中', '已延期', '已完成']

// 方法定义
const formatDate = (dateStr) => {
  return dateStr ? dateStr.replace(/-/g, '/').substring(5) : ''
}

const getStatusColor = (status) => {
  const colors = {
    '未开始': '#A8A8A8',
    '进行中': '#4A90E2',
    '已延期': '#FF6B6B',
    '已完成': '#6AC259'
  }
  return colors[status] || '#A8A8A8'
}

const showDatePicker = (type) => {
  uni.showDatePicker({
    success: (res) => {
      const dateStr = `${res.year}-${String(res.month).padStart(2, '0')}-${String(res.day).padStart(2, '0')}`
      if (type === 'start') {
        searchForm.value.startDate = dateStr
      } else {
        searchForm.value.endDate = dateStr
      }
    }
  })
}

const handleSearch = () => {
  console.log('Search parameters:', searchForm.value)
  uni.showToast({ 
    title: '执行搜索操作', 
    icon: 'none' 
  })
}

const handleReset = () => {
  searchForm.value = {
    projectName: '',
    startDate: '',
    endDate: '',
    projectStatus: ''
  }
  uni.showToast({ 
    title: '已重置', 
    icon: 'none' 
  })
}

const showAddForm = () => {
  isEdit.value = false
  resetForm()
  showForm.value = true
}

const editProject = (project) => {
  isEdit.value = true
  statusIndex.value = statusOptions.indexOf(project.status)
  Object.assign(projectForm, project)
  showForm.value = true
}

const deleteProject = (id) => {
  uni.showModal({
    title: '删除确认',
    content: '确定要删除该项目吗？',
    confirmColor: '#FF5252',
    success: (res) => {
      if (res.confirm) {
        const index = projects.findIndex(p => p.id === id)
        projects.splice(index, 1)
      }
    }
  })
}

const statusChange = (e) => {
  statusIndex.value = e.detail.value
  projectForm.status = statusOptions[e.detail.value]
}

const resetForm = () => {
  Object.assign(projectForm, {
    id: null,
    name: '',
    manager: '',
    startDate: '',
    endDate: '',
    status: ''
  })
  statusIndex.value = 0
}

const cancelForm = () => {
  showForm.value = false
  resetForm()
}

const submitForm = () => {
  if (!projectForm.name.trim()) {
    uni.showToast({ 
      title: '项目名称不能为空', 
      icon: 'none' 
    })
    return
  }
  if (!projectForm.manager.trim()) {
    uni.showToast({ 
      title: '负责人不能为空', 
      icon: 'none' 
    })
    return
  }

  if (isEdit.value) {
    const index = projects.findIndex(p => p.id === projectForm.id)
    projects.splice(index, 1, { ...projectForm })
  } else {
    projects.push({
      ...projectForm,
      id: Date.now()
    })
  }
  showForm.value = false
}
</script>

<style lang="scss" scoped>
/* 碳中和主题色彩定义 */
:root {
  --primary-color: #27ae60;
  --secondary-color: #2ecc71;
  --tertiary-color: #26de81;
  --dark-bg: #f6fbf8;
  --light-bg: #e8f5f0;
  --text-primary: #2c3e50;
  --text-secondary: #4a6572;
  --border-color: rgba(39, 174, 96, 0.1);
  --shadow-color: rgba(39, 174, 96, 0.12);
}

/* 全局容器样式 */
.page-container {
  min-height: 100vh;
  padding: 24rpx;
  background: linear-gradient(165deg, #f6fbf8, #e8f5f0);
}

/* 搜索表单样式 */
.search-form {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250rpx, 1fr));
  gap: 16rpx;
  animation: fadeIn 0.5s ease forwards;
}

.form-item {
  position: relative;
  margin-bottom: 16rpx;
}

.form-input, .form-select, .date-item {
  background-color: #f6fbf8;
  border: 1px solid rgba(39, 174, 96, 0.1);
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: var(--text-primary);
  width: 100%;
  transition: all 0.3s ease;
}

.form-input:focus, .form-select:focus, .date-item:focus {
  border-color: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1);
}

.date-range {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.date-separator {
  color: var(--text-secondary);
}

.date-item {
  flex: 1;
  text-align: center;
}

.placeholder-style {
  color: rgba(74, 101, 114, 0.5);
}

.form-buttons {
  display: flex;
  gap: 16rpx;
  margin-top: 16rpx;
}

.reset-btn, .search-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.reset-btn {
  background-color: #f9fafb;
  color: #4a6572;
  border: 1px solid rgba(39, 174, 96, 0.1);
}

.search-btn {
  background: linear-gradient(145deg, #27ae60, #2ecc71);
  color: white;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
}

.reset-btn:active {
  background-color: #e8f5f0;
}

.search-btn:active {
  background: linear-gradient(145deg, #219654, #25a65c);
  transform: translateY(2rpx);
}

/* 列表头部样式 */
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 8rpx 16rpx;
}

.total-count {
  font-size: 28rpx;
  color: var(--text-secondary);
  font-weight: 500;
}

.smart-add-btn {
  background: linear-gradient(145deg, #27ae60, #2ecc71);
  color: white;
  border-radius: 50rpx;
  height: 80rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
  transition: all 0.3s ease;
}

.smart-add-btn:active {
  background: linear-gradient(145deg, #219654, #25a65c);
  transform: scale(0.98);
}

.add-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

/* 卡片列表样式 */
.card-list {
  height: calc(100vh - 280rpx);
  padding: 10rpx 0;
}

.card {
  background: linear-gradient(145deg, #ffffff, #f9fafb);
  border-radius: 20rpx;
  border: 1px solid rgba(39, 174, 96, 0.08);
  margin-bottom: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(39, 174, 96, 0.08);
  animation: slideIn 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20rpx);
}

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.1s; }
.card:nth-child(3) { animation-delay: 0.15s; }
.card:nth-child(4) { animation-delay: 0.2s; }
.card:nth-child(5) { animation-delay: 0.25s; }
.card:nth-child(6) { animation-delay: 0.3s; }
.card:nth-child(7) { animation-delay: 0.35s; }
.card:nth-child(8) { animation-delay: 0.4s; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1px solid rgba(39, 174, 96, 0.05);
  background: linear-gradient(90deg, rgba(39, 174, 96, 0.05), rgba(46, 204, 113, 0.02));
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.project-name {
  font-size: 32rpx;
  font-weight: 600;
  color: var(--text-primary);
}

.project-id {
  font-size: 24rpx;
  color: var(--text-secondary);
}

.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: white;
  font-weight: 500;
}

.card-body {
  padding: 20rpx 30rpx;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24rpx;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: var(--text-secondary);
}

.info-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
  padding: 16rpx 30rpx;
  border-top: 1px solid rgba(39, 174, 96, 0.05);
  background-color: rgba(39, 174, 96, 0.02);
}

.action-btn {
  border-radius: 8rpx;
  font-size: 26rpx;
  padding: 12rpx 24rpx;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit {
  background-color: #f6fbf8;
  color: #27ae60;
  border: 1px solid rgba(39, 174, 96, 0.2);
}

.delete {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.2);
}

.edit:active {
  background-color: rgba(39, 174, 96, 0.1);
}

.delete:active {
  background-color: rgba(231, 76, 60, 0.15);
}

/* 表单弹窗样式 */
.form-modal {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8rpx);
  animation: fadeIn 0.3s ease forwards;
}

.form-content {
  width: 85%;
  max-width: 800rpx;
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
  animation: scaleIn 0.3s ease forwards;
  display: flex;
  flex-direction: column;
}

.form-title {
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: var(--text-primary);
  padding: 30rpx 0;
  border-bottom: 1px solid rgba(39, 174, 96, 0.1);
  background: linear-gradient(90deg, rgba(39, 174, 96, 0.05), rgba(46, 204, 113, 0.02));
}

.form-scroll {
  padding: 30rpx;
  max-height: 60vh;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: var(--text-secondary);
  margin-bottom: 12rpx;
  font-weight: 500;
}

.required::after {
  content: "*";
  color: #e74c3c;
  margin-left: 8rpx;
}

.date-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.date-input {
  background-color: #f6fbf8;
  border: 1px solid rgba(39, 174, 96, 0.1);
  border-radius: 10rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-icon, .arrow-icon {
  width: 32rpx;
  height: 32rpx;
}

.form-buttons {
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1px solid rgba(39, 174, 96, 0.1);
}

.btn {
  flex: 1;
  height: 90rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.cancel {
  background-color: #f6fbf8;
  color: #4a6572;
  border: 1px solid rgba(39, 174, 96, 0.1);
}

.confirm {
  background: linear-gradient(145deg, #27ae60, #2ecc71);
  color: white;
  border: none;
  box-shadow: 0 4rpx 8rpx rgba(39, 174, 96, 0.2);
}

.cancel:active {
  background-color: #e8f5f0;
}

.confirm:active {
  background: linear-gradient(145deg, #219654, #25a65c);
  transform: translateY(2rpx);
}

/* 动画定义 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    grid-template-columns: 1fr;
  }
  
  .date-picker {
    grid-template-columns: 1fr;
  }
}
</style>